<template>
    <div>
        <h2>会员显示</h2>
        <input type="button" value="新增" class="btn btn-danger" @click="ok">
        会员名：
        <input type="text" v-model="data.username">
        等级：
        <select v-model="data.levelid">
            <option value="">请选择</option>
            <option :value="item.Id" v-for="item in cc.data" :key="item.Id">{{item.LevelName}}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="getmember">
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>编号</td>
                    <td>手机号</td>
                    <td>会员名</td>
                    <td>身份证号</td>
                    <td>等级</td>
                    <td>生日</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>是否删除</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in quertinfo.data" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.MemberCode}}</td>
                    <td v-if="item.Phone">{{item.Phone.substring(0,3)+'****'+item.Phone.substring(7)}}</td>
                    <td>{{item.UserName}}</td>
                    <td>{{item.Card}}</td>
                    <td>
                        <span v-if="item.LevelId==1">黄金会员</span>
                        <span v-if="item.LevelId==2">钻石会员</span>
                        <span v-if="item.LevelId==3">至尊会员</span>
                        <span v-if="item.LevelId==4">超级会员</span>
                        <span v-if="item.LevelId==5">普通会员</span>
                        <span v-if="item.LevelId==6">白银会员</span>
                        <span v-if="item.LevelId==7">好好</span>
                        <span v-if="item.LevelId==8">存储</span>
                    </td>
                    <td>{{moment(item.Birth).format('YYYY-MM-DD HH:mm:ss')}}</td>
                    <td>{{item.Sex==0?"男":"女"}}</td>
                    <td>{{item.State==false?"启用":"禁用"}}</td>
                    <td>{{item.IsDeleted}}</td>
                    <td>{{item.JiFen}}</td>
                    <td v-if="item.Money">￥{{item.Money.toFixed(2)}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-primary" @click="del(item.Id)">
                        <input type="button" value="修改" class="btn btn-success" @click="upd(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRouter} from 'vue-router'
import moment from 'moment';
const router=useRouter();

const ok=()=>{
    router.push('/AddMember');
}

//修改
const upd=(id:any)=>{
    router.push({
        path:'/memberupd',
        query:{
            id:id,
        }
    })
}

//删除
const del=(id:any)=>{
    //1.友好提示
    let f=confirm('确认删除吗');

    if(f){
        //删除
        axios({
            method:'delete',
            url:'/api/Member/DelMember',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getmember();
            }
            else{
                alert('删除失败');
            }
        })
    }
}

//下拉框显示
//周期函数
onMounted(()=>{
    getlevel();
    getmember();
})

const data=reactive({
    username:"",
    levelid:"",
})
const quertinfo:any=reactive({
    data:[]
})

//-----------显示
const getmember=()=>{
        //发送网络请求
        axios({
            url:'/api/Member/GetMember',
            method:'get',
            params:data
        })
        .then(res=>{
            console.log(res);
            quertinfo.data=res.data;
        })
        .catch(err=>{
            console.error(err);
        })
}

//下拉绑定
const cc:any=reactive({
    data:[]
})
const getlevel=()=>{
    //发送网络请求
    axios({
        method:'get',
        url:'/api/Member/GetLevel'
    })
    .then(res=>{
        console.log(res);
        cc.data=res.data;
    })
    .catch(err=>{
        console.error(err);
    })
}
</script>

<style scoped>
input[type='button']{
    margin-right: 10px;
}
</style>